<template>
	<el-dialog
		:title="sortTitle + '排序'"
		:visible.sync="stepSortShow"
		width="50%"
		:before-close="cancel"
		:close-on-click-modal="false"
		:close-on-press-escape="false"
		top="5vh"
	>
		<div class="app-container">
			<el-form ref="form" label-width="80px" label-position="left" v-if="sortTitle === '步骤'">
				<el-form-item label="基金类型" prop="raiseType">
					<el-select v-model="form.raiseType" placeholder="请选择" filterable style="width: 100%" @change="fundTypeChange">
						<el-option :label="`${item.fieldName}基金`" :value="item.raiseType" v-for="item in allData" :key="item.raiseType"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<el-table
				ref="dragTable"
				:data="list"
				row-key="fieldCode"
				border
				fit
				highlight-current-row
				style="width: 100%"
				v-if="list.length"
				:header-cell-style="{ background: '#FAFAFA' }"
			>
				<el-table-column align="center" label="修改前步骤位置" width="150">
					<template slot-scope="{ row }">
						<span>{{ row.stepNum }}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="修改后步骤位置" width="150">
					<template slot-scope="scope">
						<span>{{ scope.$index + 1 }}</span>
					</template>
				</el-table-column>

				<el-table-column :label="`${sortTitle}名称`" prop="fieldName"> </el-table-column>
			</el-table>
		</div>
		<span slot="footer" class="dialog-footer">
			<el-button @click="cancel" size="small">取 消</el-button>
			<el-button type="primary" @click="addConfirm('form')" size="small" :loading="loading" :disabled="loading">确 定</el-button>
		</span>
	</el-dialog>
</template>

<script>
import Sortable from 'sortablejs'
import { jsonArray } from '@/api/productApi/file'
import { editStepNum } from '@/api/productApi/fieldManagement'
export default {
	name: 'DragTable',

	props: {
		allData: {
			type: Array,
			default: Array
		},
		stepSortShow: {
			type: Boolean,
			default: false
		},
		stepSortFunc: {
			type: Function,
			default: Function
		},
		sortTitle: {
			type: String,
			default: ''
		},
		getData: {
			type: Function,
			default: Function
		},
		handleClick: {
			type: Function,
			default: Function
		}
	},

	data() {
		return {
			list: [],
			sortable: null,
			form: {},
			loading: false
		}
	},

	methods: {
		// 重置
		cancel() {
			this.$emit('stepSortFunc')
			this.form.raiseType = ''
			this.list = []
		},

		// 切换数据
		fundTypeChange(val) {
			if (val) {
				if (Array.isArray(val)) {
					this.list = jsonArray(val)
					this.list.forEach((item, index) => {
						item.stepNum = index + 1
					})
				} else {
					this.list = jsonArray(this.allData.find(item => item.raiseType === val).childNodeList)
				}
				setTimeout(() => {
					this.setSort()
				}, 100)
			} else {
				this.list = []
			}
		},

		// 新增或编辑
		addConfirm() {
			if (!this.form.raiseType) {
				if (this.sortTitle === '步骤') {
					this.$message({ type: 'error', message: '请选择基金类型' })
					return
				}
			}
			this.operatorComfirm(() => {
				const listData = jsonArray(this.list)
				listData.forEach((item, index) => {
					item.stepNum = index + 1
				})
				this.loading = true
				editStepNum(listData)
					.then(res => {
						if (res.msgCode === 'Y') {
							this.cancel()
							if (this.sortTitle === '步骤') {
								this.$emit('handleClick')
							}
							this.$emit('getData')
						}
					})
					.finally(() => {
						this.loading = false
					})
			}, `修改${this.sortTitle}顺序`)
		},

		// 拖拽方法
		setSort() {
			const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
			this.sortable = Sortable.create(el, {
				ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
				setData: function(dataTransfer) {
					dataTransfer.setData('Text', '')
				},
				onEnd: evt => {
					const targetRow = this.list.splice(evt.oldIndex, 1)[0]
					this.list.splice(evt.newIndex, 0, targetRow)
				}
			})
		}
	}
}
</script>

<style>
.sortable-ghost {
	opacity: 0.8;
	color: #fff !important;
	background: #42b983 !important;
}
</style>

<style scoped>
.icon-star {
	margin-right: 2px;
}
.drag-handler {
	width: 20px;
	height: 20px;
	cursor: pointer;
}
.show-d {
	margin-top: 15px;
}
</style>
<style lang="scss" scoped>
.app-container {
	::v-deep .el-table--border th,
	.el-table__fixed-right-patch {
		border-bottom: 1px solid #ebeef5;
		background: #ecf5ff;
		color: #606266;
		padding: 8px 0;
	}
	::v-deep td {
		padding: 12px 0;
	}
}
</style>
